<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个人信息</title>
    <link rel="stylesheet" href="../../dist/css/layui.css">
    <script src="../../dist/layui.js"></script>
    <script src="../../dist/jquery-1_8_3.js"></script>
    <style>
        .content {
            font-size: 20px;
        }
        .content span {
            color: #9F9F9F;
        }
    </style>
</head>
<body>
<div class="content">
    <div>
        学号：<span class="appendText" id="uid"></span>
    </div>
    <div>
        姓名：<span class="appendText" id="name"></span>
    </div>
    <div>
        电话：<span class="appendText" id="phone"></span>
    </div>
    <div>
        邮箱：<span class="appendText" id="email"></span>
    </div>
    <div >
        政治面貌：<span class="appendText" id="politicalStatus"></span>
    </div>
    <div>
        是否为贫困生：<span class="appendText" id="needyStudent"></span>
    </div>
    <div>
        寝室号：<span class="appendText" id="dorm"></span>
    </div>
    <div>
        个人特长：<span class="appendText" id="strength"></span>
    </div>
</div>
<hr class="layui-border-orange">
<span style="font-size: 15px; color: orangered">修改信息</span><br/>
<form class="layui-form">
        <!-- 电话 -->
        <div class="layui-form-item" style="width: 300px">
            <label class="layui-form-label">电话:</label>
            <div class="layui-input-block">
                <input type="text" name="phone" id="updatePhone" required  lay-verify="phone" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 邮箱 -->
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-inline">
                <input type="text" name="email" id="updateEmail" required lay-verify="email" placeholder="name@example.com" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 政治面貌，单选框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">政治面貌:</label>
            <div class="layui-input-block">
                <select name="politicalStatus" id="updatePoliticalStatus" lay-verify="required">
                    <option value=""></option>
                    <option value="共产党员">共产党员</option>
                    <option value="预备党员">预备党员</option>
                    <option value="共青团员">共青团员</option>
                    <option value="群众">群众</option>
                </select>
            </div>
        </div>

        <!-- 是否为贫困生，单选框 -->
        <div class="layui-form-item">
            <label class="layui-form-label">是否贫困生:</label>
            <div class="layui-input-block">
                <input type="radio" name="needyStudent" id="yes" value="1" title="是">
                <input type="radio" name="needyStudent" id="no" value="0" title="否">
            </div>
        </div>
        <!-- 寝室号 -->
        <div class="layui-form-item">
            <label class="layui-form-label">寝室号:</label>
            <div class="layui-input-inline">
                <input type="text" name="dorm" id="updateDorm" lay-verify="required" placeholder="例如：西和2幢518" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- 个人特长 -->
        <div class="layui-form-item">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">个人特长:</label>
                <div class="layui-input-block">
                    <textarea name="strength" id="updateStrength" placeholder="请输入内容" class="layui-textarea" lay-verify="required"></textarea>
                </div>
            </div>
        </div>
    <!-- 提交 -->
    <div style="margin-top: 30px">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal layui-block" lay-submit hidden="">提交</button>
        </div>
    </div>
</form>

<script>

    // 先获取信息，填充到表单中
    $.ajax({
        url: '/student/selectIndividualInformationByUid',
        type:'get',
        dataType:'JSON',
        success:function(result) {
            $("#uid").append(result.data.uid);
            $("#name").append(result.data.name);
            $("#phone").append(result.data.phone);
            $("#updatePhone").val(result.data.phone);
            $("#email").append(result.data.email);
            $("#updateEmail").val(result.data.email);
            $("#politicalStatus").append(result.data.politicalStatus);
            $("#updatePoliticalStatus").val(result.data.politicalStatus);
            $("#needyStudent").append(result.data.needyStudent);
            $("#dorm").append(result.data.dorm);
            $("#updateDorm").val(result.data.dorm);
            $("#strength").append(result.data.strength);
            $("#updateStrength").val(result.data.strength);

            switch (result.data.needyStudent) {
                case '是':
                    $('#yes').attr('checked', 'checked');
                    break;
                case '否':
                    $('#no').attr('checked', 'checked');
                    break;
            }
            layui.use('form',function(){
                var form = layui.form;
                //刷新radio和select
                form.render();
            });
        }
    });

    // 再看情况执行修改
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,$ = layui.jquery;

        form.on('submit()',function(data){

            $.ajax({
                url:'/student/updateIndividualInformationByUid',
                async: false,
                type:'post',
                data:data.field,
                // 是否使用传统的方式浅层序列化,若有数组参数或对象参数需要设置true
                traditional: true,
                dataType:'JSON',
                success:function(result){
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    // 关闭父级弹出层
                    parent.layer.close(index);
                    parent.parent.layer.msg("信息修改成功！",{icon:1,time:1000});
                }
            });
            return false;//组织表单默认提交并跳转
        });
    });
</script>
</body>
</html>
